<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灵感与故事</title>
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入图标字体库 -->
    <link rel="stylesheet" href="./font-x/css/all.min.css">
    <!-- 引入less样式编译 -->
    <link rel="stylesheet" href="./My-sty/inspiration.css">
    <!-- 引入轮播图 -->
    <script src="./My-sty/js/轮播图.js"></script>
    <!-- 引入轮播图需要的工具 -->
    <script src="./My-sty/js/工具 tools.js"></script>
</head>

<body>
    <!-- 创建顶部导航外围容器 -->
    <div class="inspiration-wrapper">
        <!-- 内部容器 -->
        <div class="inspiration-nav w">
            <!-- 导航容器 -->
            <ul class="navflex">
                <li><a href="index.html">千寻首页</a></li>
                <li><a href="#">剧情简介</a></li>
                <li><a href="#">人物简介</a></li>
                <li><a href="#">精彩剧照</a></li>
                <li><a href="#">获奖记录</a></li>
                <li><a href="#">热门影评</a></li>
                <li><a href="#">影片意义</a></li>
            </ul>
        </div>
    </div>

    <!-- 创建主体外围容器 -->
    <div class="subject-wrapper">
        <!-- 创建主体内部居中容器 -->
        <div class="middle-wrapper w">
            <!-- 创建主图容器 -->
            <div class="mainpicture-img clearfix" id="imglistBox">
                <!-- <ul id="imgList">
                    <li><img src="./project-img/主图.jpg" alt=""></li>
                    <li><img src="./project-img/1.jpg" alt=""></li>
                    <li><img src="./project-img/8.jpg" alt=""></li>
                    <li><img src="./project-img/11.jpg" alt=""></li>
                </ul> -->
                <img src="./project-img/主图.jpg" alt="">

                <!-- 轮播点 -->
                <div class="Carousel">
                    <a class="a1" href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                </div>
            </div>

            <!-- 主页内容盒子 -->
            <div class="content-inspiration">
                <!-- 上部标题容器 -->
                <h1 class="tit">千与千寻灵感与故事</h1>
                <!-- 下部内容容器 -->
                <div class="introduce">

                    <div class="left-no1">
                        <img src="./project-img/龙猫.jpg" alt="">
                    </div>

                    <!-- 项目内容盒子 -->
                    <div class="pro-1">
                        <!-- 图片 -->
                        <div class="pro-immg">
                            <img src="./project-img/1.png" alt="">
                        </div>
                        <h2>剧情简介</h2>
                        <p>
                            10岁的少女千寻与父母一起从都市搬家到了乡下。没想到在搬家的途中，一家人发生了意外。他们进入了汤屋老板魔女控制的奇特世界——在那里不劳动的人将会被变成动物。千寻的爸爸妈妈因贪吃变成了猪，千寻为了救爸爸妈妈经历了很多磨难，在期间她遇见了白龙，一个既聪明又冷酷的少年，在经历了很多事情之后，千寻最后救出了爸爸妈妈，拯救了白龙。
                        </p>
                    </div>
                    <div class="pro-1">
                        <!-- 图片 -->
                        <div class="pro-immg">
                            <img src="./project-img/15.jpg" alt="">
                        </div>
                        <h2>人物简介</h2>
                        <p>
                            汤婆婆的独子，穿一件印有"坊"字样的肚兜。虽然他个子非常大，却是婴儿的模样，因为害怕“细菌”而天天待在堆满了玩具和枕头的房间里，和大多数孩子一样喜欢用哭来威胁人。后来被钱婆婆变成一只小老鼠跟随千寻旅行，有了很大成长。
                        </p>
                    </div>
                    <div class="pro-1">
                        <!-- 图片 -->
                        <div class="pro-immg">
                            <img src="./project-img/4.jpg" alt="">
                        </div>
                        <h2>精彩剧照</h2>
                        <p>
                            《千与千寻》是一部“一面千话”的治愈系动画，不同阶段、不同生活经历的人都会有自己的感悟。贪婪就像一张看不见边际的大网，在人的欲望中不断扩张，失去自我的人生一旦被贪婪主导，最终逃不过“作茧自缚”的下场。
                        </p>
                    </div>

                </div>
            </div>


        </div>

        <!-- 底部返回容器 -->
        <div class="return-wrapper">
            <div class="return-ins w">
                <div class="return-nnv">
                    <div class="return1"><a href="index.html">首页</a></div>
                    <div class="fg"></div>
                    <div class="return2"><a href="perception.html">下一张</a></div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>